import { Select, Image, Button } from 'antd'
import css from './NpcTool.module.scss'
import { npcStore, type EntityOption } from './NpcStore'
import { observer } from 'mobx-react'
import { useState } from 'react'
const filterOptionFn = (inputValue: string, option?: EntityOption) => {
  if (!inputValue) return true
  if (!option) return false
  return [option.short, option.full, option.text].some((i) =>
    i.includes(inputValue)
  )
}
type SelectChange =
  | ((value: string, option: EntityOption | EntityOption[]) => void)
  | undefined
const SmallSelect = (props: {
  value: string
  options: EntityOption[]
  onChange?: SelectChange
}) => {
  return (
    <Select
      size="small"
      showSearch
      allowClear
      style={{ width: 200 }}
      value={props.value}
      filterOption={filterOptionFn}
      options={props.options}
      onChange={props.onChange}
    />
  )
}
const ImagePreview = (props: { src: string; text?: string }) => {
  const [visible, setVisible] = useState(false)
  return (
    <>
      <Button size="small" type="primary" onClick={() => setVisible(true)}>
        {props.text || '放大'}
      </Button>
      <Image
        width={200}
        style={{ display: 'none' }}
        preview={{
          visible,
          scaleStep: 0.5,
          src: props.src,
          onVisibleChange: (value) => {
            setVisible(value)
          }
        }}
      />
    </>
  )
}
const CurrMapSelector = observer(() => {
  return (
    <div className={css['curr-map']}>
      <div className={css.label}>在：</div>
      <SmallSelect
        value={npcStore.currMap}
        options={npcStore.allMapOption}
        onChange={npcStore.setCurrMap}
      />
    </div>
  )
})
const CurrNpcSelector = observer(() => {
  return (
    <div className={css['curr-npc']}>
      <div className={css.label}>找到：</div>
      <SmallSelect
        value={npcStore.currNpc}
        options={npcStore.currNpcOptions}
        onChange={npcStore.setCurrNpc}
      />
    </div>
  )
})
const CurrMapPicture = observer(() => {
  const picture = npcStore.currMapPicture
  return (
    <div className={css['curr-map-picture']}>
      {picture ? (
        <>
          <img className={css['map-img']} src={picture} />
          <ImagePreview src={picture} />
        </>
      ) : null}
    </div>
  )
})

const DestNpcSelector = observer(() => {
  return (
    <div className={css['dest-npc']}>
      <div className={css.label}>查找：</div>
      <SmallSelect
        value={npcStore.destNpc}
        options={npcStore.destNpcOptions}
        onChange={npcStore.setDestNpc}
      />
    </div>
  )
})
const DestMapName = observer(() => {
  return (
    <div className={css['dest-map']}>
      <div className={css.label}>在：</div>
      <div className={css.result}>{npcStore.destMap}</div>
    </div>
  )
})

const DestMapPicture = observer(() => {
  const picture = npcStore.destMapPicture
  return (
    <div className={css['dest-map-picture']}>
      {picture ? (
        <>
          <img className={css['map-img']} src={picture} />
          <ImagePreview src={picture} />
        </>
      ) : null}
    </div>
  )
})
function NpcTool() {
  return (
    <div className={css.box}>
      <div className={css['sub-layout']}>
        <div className={css['select-group']}>
          <CurrMapSelector />
          <CurrNpcSelector />
        </div>
        <CurrMapPicture />
      </div>
      <div className={css['sub-layout']}>
        <div className={css['select-group']}>
          <DestNpcSelector />
          <DestMapName />
        </div>
        <DestMapPicture />
      </div>
    </div>
  )
}

export const Component = NpcTool
